<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
		<link rel="stylesheet" href="../css/style-reset.css">
		<title>我的订单</title>

		<style>
			/*order*/
			.content ul{
				padding: 20px 15px;
			}
			.content ul li{
				background-color: #fff;
				margin-bottom: 10px;
				padding: 12px 15px;
				border: 1px solid #dcdcdc;
				overflow: hidden;
			}
			.left{
				float: left;
			}
			.right{
				float: right;
			}
			.date{
				font-size: 15px;
				margin-bottom: 10px;
			}
			.orderid,
			.class,
			.time{
				font-size: 13px;
				margin-bottom: 5px;
			}
			.todo .btn{
				display: inline-block;
				width: 80px;
				font-size: 16px;
				font-weight: 600;
				color: #fff;
				padding: 5px 0;
				text-align: center;
				border: none;
				border-radius: 4px;
				background-color: #53ceca;
			}
			.done .orderid,
			.done .class,
			.done .time{
				color: #b4b4b4;
			}
			.done .btn{
				display: inline-block;
				width: 80px;
				text-align: right;
				font-size: 16px;
				font-weight: 600;
				color: #53ceca;
				padding: 5px 0;
			}
			.done .btn.canceled{
				color: #fab345;
			}
			.done .btn .payed{
				color: #53ceca;
			}
			.btn{
				margin-bottom: 15px;
			}
			.todo p.money{
				color: #e95656;
			}
			.done p.money{
				color: #b4b4b4;
				text-align: right;
			}
			.money{
				font-size: 18px;
				font-weight: 600;
				text-align: center;
			}
			.money-icon{
				font-size: 13px;
				font-weight: 600;
				margin-right: 5px;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<ul class="orders">
				<li class="items todo">
					<div class="left">
						<p class="date">2015.08.19</p>
						<p class="orderid">订单号：23093409850437</p>
						<p class="class">默瀚 私教课</p>
						<p class="time">08.26周四 16:00-17:00</p>
					</div>
					<div class="right">
						<a class="btn" href="">去付款</a>
						<p class="money"><span class="money-icon">¥</span>2,000</p>
					</div>
				</li>
				<li class="items todo">
					<div class="left">
						<p class="date">2015.08.19</p>
						<p class="orderid">订单号：23093409850437</p>
						<p class="class">默瀚 私教课</p>
						<p class="time">08.26周四 16:00-17:00</p>
					</div>
					<div class="right">
						<a class="btn" href="">联系客服</a>
						<p class="money"><span class="money-icon">¥</span>2,000</p>
					</div>
				</li>
				<li class="items done">
					<div class="left">
						<p class="date">2015.08.19</p>
						<p class="orderid">订单号：23093409850437</p>
						<p class="class">默瀚 私教课</p>
						<p class="time">08.26周四 16:00-17:00</p>
					</div>
					<div class="right">
						<a class="btn canceled" href="">已取消</a>
						<p class="money"><span class="money-icon">¥</span>2,000</p>
					</div>
				</li>
				<li class="items done">
					<div class="left">
						<p class="date">2015.08.19</p>
						<p class="orderid">订单号：23093409850437</p>
						<p class="class">默瀚 私教课</p>
						<p class="time">08.26周四 16:00-17:00</p>
					</div>
					<div class="right">
						<a class="btn payed" href="">已付款</a>
						<p class="money"><span class="money-icon">¥</span>2,000</p>
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>